<template>
  <div>
    
    <!-- 这是轮播图区域 -->
    <mt-swipe :auto="2000">
    	<!-- 在组件中，使用v-for循环的话，一定要使用key  -->
	  <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
	  	<img :src="item.img" alt="">
	  </mt-swipe-item>
	</mt-swipe>

	<!-- 九宫格 =》 六宫格 -->
	 <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        	<router-link class="mui-tab-item" to="/home/newslist">
	            <img src="../../images/menu1.png" alt="">
	            <div class="mui-media-body">新闻资讯</div>
            </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../images/menu2.png" alt="">
            <div class="mui-media-body">图片分享</div></a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../images/menu3.png" alt="">
            <div class="mui-media-body">商品购买</div></a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../images/menu4.png" alt="">
            <div class="mui-media-body">留言反馈</div></a>
       	</li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../images/menu5.png" alt="">
            <div class="mui-media-body">视频专区</div></a>
       	</li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
            <img src="../../images/menu6.png" alt="">
            <div class="mui-media-body">联系我们</div></a>
         </li>
    </ul> 

    <h3>HomeContainer</h3>
  </div>
</template>

<script>
	
	import {Toast} from 'mint-ui'


	export default {
		data(){
			return {
				lunbotuList: [] // 保存轮播图数据的数组
			}
		},
		created(){
			this.getLunbotu();
		},
		methods: {
			getLunbotu(){ 
				// 获取轮播图数据的方法
				this.$http.get("lunbotu.php").then(result =>{
					console.log(result.body);
					if (result.body.status == 0) {
						// 成功
						this.lunbotuList = result.body.message;
					}else{
						// 失败
						Toast('加载轮播图error...')
					}

				});
			}
		}
	}
</script>


<style lang="scss" scoped>
.mint-swipe{
	height: 200px;

	.mint-swipe-item{
		&:nth-child(1){
			background-color: red;
		}
		&:nth-child(2){
			background-color: blue;
		}
		&:nth-child(3){
			background-color: cyan;
		}


		img{
			width: 100%;
			height: 100%;
		}
	}
}

.mui-grid-view.mui-grid-9{
	background-color: #fff;
	border:none;

	img{
		width: 60px;
		height: 60px;
	}

	.mui-media-body{
		font-size: 13px;
	}
}

.mui-grid-view.mui-grid-9 .mui-table-view-cell{
	border:none;
}

.mui-col-sm-3{
	width: 33.33%;
}

</style>
